<template>
  <div class="AssetNowAdd">
    <el-main>
      <div>
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="grid-content bg-purple">
              <el-input
                placeholder="请输入关键字进行搜索"
                v-model="search"
                class="input-with-select" style="width:230px"
              >
                <el-button slot="append" icon="el-icon-search" @click="btn"></el-button>
              </el-input>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple" style="margin:0 0 0 29px">
              <el-select v-model="form.Processing" slot="prepend" placeholder="快速处理">
                <el-option label="在用" value="InUse"></el-option>
                <el-option label="报废" value="Scrap"></el-option>
                <el-option label="闲置" value="Idle"></el-option>
                <el-option label="批量删除" value="BatchRemove"></el-option>
                <el-option label="批量导入" value="BatchImport"></el-option>
                <el-option label="导出Excel" value="ExportEXCEL"></el-option>
                <el-option label="下载入库单" value="Download"></el-option>
              </el-select>
              <el-button icon="el-icon-printer">打印</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData3"
        border
        height="383"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="State" label="状态" width="150"></el-table-column>
        <el-table-column prop="pictureUrl" label="照片" width="120"></el-table-column>
        <el-table-column prop="assetCode" label="资产编号" width="120">
          <el-button type="text" @click="dialogFormVisible = true">123 Dialog</el-button>
        </el-table-column>
        <el-table-column prop="assetName" label="资产名称" width="120"></el-table-column>
        <el-table-column prop="standardType" label="规格" width="300"></el-table-column>
        <el-table-column prop="sn" label="SN号" width="120"></el-table-column>
        <el-table-column prop="unit" label="计量单位" width="120"></el-table-column>
        <el-table-column prop="amount" label="金额(单位:万元)" width="200"></el-table-column>
        <el-table-column prop="useCompany" label="使用公司" width="120"></el-table-column>
        <el-table-column prop="useDept" label="使用部门" width="120"></el-table-column>
        <el-table-column prop="buyDate" label="购入时间" width="120"></el-table-column>
        <el-table-column prop="useUser" label="使用人" width="120"></el-table-column>
        <el-table-column prop="ownCompany" label="所属公司" width="300"></el-table-column>
        <el-table-column prop="area" label="区域" width="120"></el-table-column>
        <el-table-column prop="storageLocation" label="存放地点" width="120"></el-table-column>
        <el-table-column prop="deadLine" label="使用期限(月)" width="120"></el-table-column>
        <el-table-column prop="assetAdmin" label="管理员" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small"  @click="dialogFormVisible = true">编辑</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="资产详情" :visible.sync="dialogFormVisible" width="80%">
        <el-form :model="form">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="资产编号" prop="assetCode" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.assetCode" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="资产类别" prop="assetType" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.assetType" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="资产名称" prop="assetName" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.assetName" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="所属公司" prop="ownCompany" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.ownCompany" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="区域" prop="area" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.area" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="购入时间" prop="buyDate" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.buyDate" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="使用公司" prop="useCompany" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.useCompany" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="规格型号" prop="standardType" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.standardType" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="SN     号" prop="sn" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.sn" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="计量单位" prop="unit" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.unit" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="金      额" prop="amount" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.amount" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="使用部门" prop="useDept" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.useDept" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="存放地点" prop="storageLocation" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.storageLocation" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="使用期限" prop="deadLine" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.deadLine" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="使用人" prop="useUser" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.useUser" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="来源" prop="from" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.from" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="管理员" prop="assetAdmin" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.assetAdmin" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="照片" prop="pictureUrl" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.pictureUrl" auto-complete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.remark" auto-complete="off"></el-input>
                </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <br>
      <div class="block">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <span class="demonstration">已选择0条</span>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="prev, pager, next, sizes, jumper"
                :total="400"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input5: "",
      search:"",
      form: {
        Processing: ""
      },
      tableData3: [
        {
          State: "在用",
          pictureUrl: "",
          assetCode: "123456",
          assetName: "奔驰"
        },
        {
          State: "报废",
          pictureUrl: "",
          assetCode: "123456",
          assetName: "奔驰"
        },
        {
          State: "闲置",
          pictureUrl: "",
          assetCode: "123456",
          assetName: "奔驰"
        },
        {
          State: "在用",
          pictureUrl: "",
          assetCode: "123456",
          assetName: "奔驰"
        },
        {
          State: "在用",
          pictureUrl: "",
          assetCode: "123456",
          assetName: "奔驰"
        },
        {
          State: "在用",
          pictureUrl: "",
          assetCode: "123456",
          assetName: "奔驰"
        },
        {
          State: "在用",
          pictureUrl: "",
          assetCode: "123456",
          assetName: "奔驰"
        }
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      multipleSelection: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      ruleForm: {
        assetCode: "",
        assetType: "",
        assetType: "",
        assetName: "",
        ownCompany: "",
        area: "",
        imageUrl: "",
        remark: "",
        buyDate: "",
        useCompany:"",
        standardType:"",
        sn:"",
        unit:"",
        amount:"",
        useDept:"",
        storageLocation:"",
        deadLine:"",
        useUser:"",
        from:"",
        assetAdmin:"",
        pictureUrl:"",
        remark:"",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    btn(){},
  }
};
</script>
<style lang="scss" scoped>
</style>
